<template>
  <div id="talk-room">
    <audio v-show="false" ref="music" controls>
      <source src="@/assets/audio/msgtip.mp3" type="audio/ogg" />
      <source src="@/assets/audio/msgtip.mp3" type="audio/mpeg" />
      您的浏览器不支持 audio 元素。
    </audio>
    <div id="room-top">
      <div>
        <p>正在和阿里巴巴交谈</p>
        <p>|</p>
        <p style="color: #61687C">沟通职位</p>
        <p>前端开发</p>
        <p style="color: red">3-6k</p>
        <p>长沙</p>
      </div>
      <delivery></delivery>
    </div>
    <article id="article">
      <div
        :class="myName!=item.nickName? 'msg' : 'msg1'"
        v-for="(item, index) in msgList"
        :key="index"
      >
<!--        <van-image-->
<!--          round-->
<!--          width="3.3rem"-->
<!--          height="3.3rem"-->
<!--          fit="cover"-->
<!--          :src="require('@/assets/img/Avatar.jpg')"-->
<!--        />-->
        <div :class="myName!=item.nickName? 'msg-big' : 'msg-big1'">
<!--          <div class="msg-top">-->
<!--            {{ item.nickName }}-->
<!--          </div>-->
          <div class="msg-bot">
            {{ item.msg }}
          </div>
        </div>
      </div>
    </article>
    <footer>
      <input ref="input" v-model="msg" @keyup.enter="send()" type="text" />
      <el-button @click="add()" round size="small" type="info"
        >发送</el-button
      >
    </footer>
  </div>
</template>

<script>
import Delivery from "@/views/Home/Recruitment/delivery";
export default {
  components: {Delivery},
  data() {
    return {
      ws: "",
      personNum: 0,
      msg: "",
      height: 0,
      msgList: [
        {
          nickName: "我是你的小可爱呀",
          msg:
            "明天不用上课明天不用上课明天不用上课明天不用上课明天不用上课明天不用上课明天不用上课",
          type: 1,
        },
      ],
      myName:'打靶鬼'
    };
  },
  created() {
    this.start();
  },
  methods: {
    add(){
      this.msgList.push({nickName:"打靶鬼",msg:'123213213231123',type: 1})
      this.height += 200;
      let audio = this.$refs.music;
      audio.play();
      setTimeout(() => {
        this.height += 100;
        document.getElementById("article").scrollTop = this.height;
      }, 0);
    },
    start() {
      if ("WebSocket" in window) {
        console.log("您的浏览器支持 WebSocket!");

        // 初始化一个 WebSocket 对象，参数指明url
        this.ws = new WebSocket("ws://localhost:9999/");

        // WebSocket 连接时候触发
        this.ws.onopen = ()=> {
          //使用 send() 方法发送数据
          this.ws.send("有新人加入了!");
        };

        // 接收服务端数据时触发
        this.ws.onmessage =(evt)=> {
          const { data } = evt;
          const finalData = JSON.parse(data);
          console.log(finalData);
          this.msgList.push(finalData);
          let audio = this.$refs.music;
          audio.play();
          setTimeout(() => {
            this.height += 100;
            document.getElementById("article").scrollTop = this.height;
          }, 0);
          this.$refs.input.focus();
        };

        //断开 web socket 连接成功触发事件
        // this.ws.onclose = function () {
        //   // 关闭 websocket
        //   alert("连接已关闭...");
        // };
      } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
      }
    },
    send() {
      if (!this.msg) {
        return;
      }

      let name = localStorage.getItem("myName");
      let person = {
        nickName: name || "未设置",
        msg: this.msg,
        toNickName:'龙年生'
      };
      let obj=JSON.stringify(person)
      this.ws.send(obj);
      this.msg = "";
    },
  },
};
</script>

<style scoped lang="stylus">
#talk-room
  width 100%
  height 600px
  display flex
  flex-direction column
  justify-content space-between
#room-top
  padding 0 1.2rem
  width 100%
  height 40px
  background-color white
  display flex
  align-items center
  justify-content space-between
  border-bottom 1px solid #e5dada
  &>div
    display flex
  & p
    display flex
    align-items center
    margin-right 1rem
    font-size .8rem
    color #91c6c0
article
  width 100%
  height 80%
  box-sizing border-box
  padding 0.4rem 0.4rem
  // background url('../assets/img/bg.jpg') 100% 70%
  background white
  overflow-y auto
  overflow-x hidden
  scroll-behavior smooth
footer
  width 100%
  height 10%
  background-color #62D5C8
  display flex
  align-items center
  justify-content space-around
  & button
    width 20%
  & input
    width 66%
    border-radius 2rem
    height 2rem
    outline none
    border none
    box-sizing border-box
    padding 0 1rem
// 消息侧出动画
@keyframes msgout
  0%
    transform translateX(-40px)
  100%
    transform translateX(0)
@keyframes msgout1
  0%
    transform translateX(40px)
  100%
    transform translateX(0)
.msg
  width 100%
  margin 1.2rem 0
  display flex
  animation msgout 0.3s forwards
.msg1
  width 100%
  margin 1.2rem 0
  display flex
  flex-direction row-reverse
  // justify-content flex-end
  animation msgout1 0.3s forwards
.msg-big
  // background-color #045
  width 70%
  height auto
  min-height 3.6rem
  margin 0 0.5rem
.msg-big1
  width 70%
  height auto
  min-height 3.6rem
  margin 0 0.5rem
  display flex
  flex-direction column
  justify-content space-between
  align-items flex-end
  & .msg-top
    display flex
    flex-direction row-reverse
.msg-top
  color rgb(111, 111, 113)
.msg-bot
  color white
  background-color #62D5C8
  border-radius 0.7rem
  box-sizing border-box
  padding 0.3rem
  height auto
  min-height 2rem
  width auto
  min-width 2rem
  display inline-block
  word-break break-all
</style>
